<template>
  <div class="flex justify-center align-center" style="margin-top: 100px">
    <q-form
      @submit="onSubmit"
      @reset="onReset"
      class="q-gutter-md"
      style="width: 500px "
    >
      <h3>找回密码</h3>
      <q-input
        filled
        v-model="userid"
        label="请输入登录名 *"
        lazy-rules
        :rules="[ val => val && val.length > 0 || '登录名不能为空']"
      />
      <q-btn  style="margin-bottom: 20px" :loading="isloading" color="primary" icon="mail" label="发送验证码到邮箱" @click="sendEmail"/>
      <q-input
        filled
        v-model="code"
        label="验证码 *"
        lazy-rules
        :rules="[ val => val && val.length > 0 || '验证码不能为空']"
      >
      </q-input>
      <q-input
        filled
        v-if="inputNewPwd"
        v-model="newpwd"
        label="新密码 *"
        lazy-rules
        :type="isPwd ? 'password' : 'text'" hint=""
        :rules="[ val => val && val.length > 0 || '新密码不能为空']"
      >
        <template v-slot:append>
          <q-icon
            :name="isPwd ? 'visibility_off' : 'visibility'"
            class="cursor-pointer"
            @click="isPwd = !isPwd"
          />
        </template>
      </q-input>
      <div class="flex justify-between " style="height: 40px">
        <q-radio dense v-model="userType" val="student" label="我是学生" />
        <q-radio dense v-model="userType" val="admin" label="我是管理员" />
        <q-radio dense v-model="userType" val="parent" label="我是家长" />
      </div>

      <div class="flex align-center justify-between">

        <q-btn label="提交" type="submit" color="primary"/>
        <q-btn label="返回" type="reset" color="primary" flat class="q-ml-sm" @click="back" />
      </div>
    </q-form>
  </div>
</template>

<script>
export default {
  name: 'forgetPwd',
  data () {
    return {
      isPwd: true,
      userid: '',
      code: '',
      code2: '',
      newpwd: '',
      userType: 'student',
      inputNewPwd: false,
      isloading: false
    }
  },
  methods: {
    sendEmail () {
      this.isloading = true
      const query = {
        url: '/MailSenderServlet',
        methods: 'post',
        type: 'FORM',
        data: {
          userid: this.userid,
          userType: this.userType
        }
      }
      this.$fetchData(query).then(res => {
        this.isloading = false
        this.code2 = res.data
      }).catch(e => {
        console.log(e)
      })
    },
    onSubmit () {
      this.$fetchData({
        url: '/FindBackPasswordServlet',
        methods: 'post',
        type: 'FORM',
        data: {
          p1: this.userid,
          p2: this.newpwd,
          p3: this.userType
        }
      }).then(res => {
        if (res.data === '修改成功') {
          this.$q.notify({
            icon: 'auto_graph',
            message: res.data,
            position: 'top',
            timeout: 1500,
            color: 'green'
          })
          this.$router.push('/logon')
        } else {
          this.$q.notify({
            icon: 'auto_graph',
            message: res.data,
            position: 'top',
            timeout: 1500,
            color: 'red'
          })
        }
      })
    },
    onReset () {
      this.userid = null
      this.code = null
    },
    back () {
      this.$router.push('/logon')
    }
  },
  watch: {
    code (n) {
      if (n === this.code2) {
        this.inputNewPwd = true
      } else {
        this.inputNewPwd = false
        if (n.length === 4) {
          this.$q.dialog({
            title: 'Oops',
            message: '验证码错误',
            ok: '确定',
            cancel: false
          }).onOk(() => {
            // console.log('OK')
          }).onCancel(() => {
            // console.log('Cancel')
          }).onDismiss(() => {
            // console.log('I am triggered on both OK and Cancel')
          })
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
